<template>
  <div v-loading="loading" class="w-full h-full flex py20px justify-center">
    <el-form ref="formRef" style="max-width: 640px" :model="form" :rules="rules" label-width="auto" status-icon>
      <template v-for="item in fromList">
        <el-form-item :label="item.label" :prop="item.prop">
          <template v-if="item.type === 'upload'">
            <single-upload v-model="form[item.prop]"  />
          </template>
          <template v-else>
            <div class="flex flex-col gap10px">
              <el-input v-model="form[item.prop]" :type="item.type" class="w-240px" />
              <el-text class="leading-tight" line-clamp="10">{{$t(item.hint)}}</el-text>
            </div>
          </template>
        </el-form-item>
      </template>
      <el-form-item label=" ">
        <el-button type="primary" @click="submitForm()">
          {{$t('btn.1')}}
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import SingleUpload from "@/components/Upload/SingleUpload.vue";
import Api from '@/api/setting/general'
import { onMounted } from 'vue'
const { t } = useI18n();
const loading = ref(false)
const getInfo = () => {
  loading.value = true
  Api.get().then(s => {
    if (s.data) {
      form.value = s.data
    }
  }).finally(e => {
    loading.value = false
  })
}
const fromList = [
  { label: t("form.16"), prop: "registered_bonus", hint: "hint.30" },
  { label: t("form.17"), prop: "customer_service_link", type: "textarea", hint: "" },
  { label: t("form.36"), prop: "app_title", hint: "" },
  { label: t("form.37"), prop: "app_logo", type: "upload", hint: "" },
  { label: t("form.43"), prop: "marquee", type: "textarea", hint: "" },
]
const rules = {
  registered_bonus: [{ required: true, message: t('hint.31'), trigger: 'blur' }],
  app_title: [{ required: true, message: t('hint.61'), trigger: 'blur' }],
  app_logo: [{ required: true, message: t('hint.62'), trigger: 'blur' }],
  marquee: [{ required: true, message: t('hint.68'), trigger: 'blur' }],
}
const form = ref({
  registered_bonus: '',
  customer_service_link: "",
  app_title: "",
  app_logo: "",
  marquee: ""
})
const formRef = ref()
const submitForm = () => {
  formRef.value.validate((valid, fields) => {
    if (valid) {
      loading.value = true
      Api.put(form.value).then(s => {
        ElMessage.success(t('hint.29'))
      }).finally(() => {
        loading.value = false
      })
    }
  })
}
onMounted(() => {
  getInfo()
})
</script>